<template>
  <div class="left-box">
    <el-input v-model="filterText" placeholder="请输入部门名称" />
    <el-scrollbar height="100%">
      <el-tree
        ref="treeRef"
        class="filter-tree"
        :data="data"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
      />
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  nextTick,
  getCurrentInstance,
} from 'vue'

import { ElTree } from 'element-plus'
import { $bus } from '@/utils/common/mitt'
import { DepTreeType, getDepTree } from '@/api/system/system-user'
import { isEmpty } from 'lodash-es'

const emit = defineEmits([])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})
//const { } = toRefs(props);

interface Tree {
  [key: string]: any
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const handleNodeClick = (data: Tree) => {
  if (isEmpty(data.children)) {
    $bus.emit('search-dep-user', data.name)
  }
}

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}
const data = ref<DepTreeType[]>([])

const defaultProps = {
  children: 'children',
  label: 'name',
}
const initDepTree = async () => {
  const res = await getDepTree()
  data.value = res.data
}
initDepTree()
</script>
<style lang="scss" scoped>
.left-box {
  width: 97%;
  height: 100%;
  background-color: var(--el-bg-color);
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px;
}
</style>
